<template>
    <el-dialog class="conflict_template_dialog" title="冲突提示" v-model="visible" width="60%">
        <div class="conflict_template_header">
            <h4>
                <el-icon><CircleCloseFilled /></el-icon>
                当前活动时间内以下活动商品已参加其他活动，请重新设置活动时间或活动商品！
            </h4>
            <p>同一段活动时间内，单个商品仅允许参加一个满减活动。</p>
        </div>
        <el-table :data="tableList" height="350" class="selected-good-table">
            <el-table-column v-for="{ prop, ...rest } in tableColumns" :key="prop" :prop="prop" v-bind="rest">
                <template #default="{ row }">
                    <div class="custom-goods-name" v-if="prop === 'goodsName'">
                        <el-image
                            style="width: 40px; height: 40px; min-width: 40px"
                            :src="row?.goodsImg"
                            fit="fill"></el-image>
                        <el-tooltip effect="dark" :content="row?.goodsName" placement="top">
                            <span class="custom-goods-name-span">{{ row?.goodsName }}</span>
                        </el-tooltip>
                    </div>
                    <div v-if="prop === 'partakeActivity'">
                        <div v-for="item in row.partakeActivity" :key="item.id" class="partake-activity-item">
                            {{ item.activityName
                            }}<span>({{ item.activityStartTime }}至{{ item.activityEndTime }})</span>
                        </div>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <Pagination
            :total="totalCount"
            :page-size="form.perPage"
            :current-page="form.page"
            @sizeChange="changeSizeHandler"
            @pageChange="changePageHandler" />
        <template #footer>
            <div style="flex: auto">
                <el-button type="primary" @click="handleVisible(false)">重新设置</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, computed, watch, nextTick } from 'vue';
import request from '@/request/index';
import Pagination from '@/components/Pagination.vue';
import { cloneDeep } from '@/commons/utils';

/* ---------------------------------- 父级通信 start ---------------------------------- */
const emit = defineEmits(['handle-confirm']);
const props = defineProps({
    // 商品id集合
    value: {
        type: [Array],
        default: () => []
    }
});
let visible = ref(false);
watch(
    () => props.value,
    val => {},
    {
        deep: true
    }
);
/* ---------------------------------- 父级通信 end ---------------------------------- */

const tableColumns = reactive([
    { label: '商品信息', prop: 'goodsName', minWidth: '300' },
    // { label: '活动重名时间', prop: 'activityAt', minWidth: '150' },
    { label: '冲突活动', prop: 'partakeActivity', minWidth: '500' }
]);

let loading = ref(false);
let tableList = reactive([]);
const totalCount = ref(0);
const form = reactive({
    activityName: '',
    activityStartTime: null,
    activityEndTime: null,
    activityGoodType: 1,
    goodsIds: [],
    activityType: 7,
    discountSet: {
        orderAmount: null,
        reduce: null,
        discountRepeat: 1,
        fullReduceMail: 1
    },
    page: 1,
    perPage: 10
});
const formClone = cloneDeep(form);

const handleVisible = isVisible => {
    visible.value = isVisible;
    if (!isVisible) {
        Object.assign(form, cloneDeep(formClone));
    }
};

const checkConflictVisible = async formQuery => {
    // 校验是否有冲突数据
    Object.assign(form, cloneDeep(formQuery));
    await queryCouponListHandler();
    if (tableList.length) {
        handleVisible(true);
        return true;
    }
    return false;
};
/**
 * 分页
 * @param {*} page
 */
const changePageHandler = page => {
    form.page = page;
    queryCouponListHandler();
};

/**
 * 每页记录数修改
 * @param {*} perPage
 */
const changeSizeHandler = perPage => {
    form.page = 1;
    form.perPage = perPage;
    queryCouponListHandler();
};
/**
 * 分页查询
 */
const queryCouponListHandler = async () => {
    loading.value = true;
    const { data } = await request('fullreduceConflictList', form);
    tableList.length = 0;
    Object.assign(tableList, data.list || []);
    totalCount.value = data.totalCount;
    loading.value = false;
    return true;
};
defineExpose({ checkConflictVisible });
</script>

<style lang="scss">
.conflict_template_dialog {
    max-width: 1000px;
    min-width: 900px;
    /* min-height: 570px; */
    .selected-good-table {
        border-bottom: 1px solid #eaeaea !important;
    }
}
</style>
<style lang="scss" scoped>
.conflict_template {
    &_header {
        background: #ffeded;
        border-radius: 4px;
        border: 1px solid #ffcccc;
        padding: 8px;
        margin-bottom: 16px;
        h4,
        p {
            padding-left: 28px;
            margin: 0;
            font-size: 14px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
            line-height: 20px;
        }
        h4 {
            margin-bottom: 4px;
            position: relative;
            i {
                position: absolute;
                color: var(--el-color-primary);
                font-size: 16px;
                left: 6px;
                top: 50%;
                transform: translateY(-50%);
            }
        }
        p {
            color: #969696;
        }
    }
    &_dialog {
        .custom-goods-name {
            display: inline-flex;
            align-items: center;
            width: 100%;
            &-span {
                margin-left: 5px;
                display: -webkit-box;
                max-width: calc(100% - 45px);
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                overflow: hidden;
            }
        }
        .partake-activity-item {
            font-size: 14px;
            line-height: 24px;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #33302d;
            span {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #969696;
                margin-left: 5px;
            }
        }
    }
}
</style>
